<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import {
  pieOptions,
  barOptions,
  lineOptions,
  wordOptions,
} from '@/views/Dashboard/echarts-data'
import { Echart } from '@/components/Echart'
import { ElRow, ElCol, ElCard } from 'element-plus'

const { t } = useI18n()
</script>

<template>
  <ContentWrap
    :title="t('echartDemo.echart')"
    :message="t('echartDemo.echartDes')">
    <ElRow
      :gutter="20"
      justify="space-between">
      <ElCol
        :xl="10"
        :lg="10"
        :md="24"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-20px">
          <Echart
            :options="pieOptions"
            :height="300" />
        </ElCard>
      </ElCol>
      <ElCol
        :xl="14"
        :lg="14"
        :md="24"
        :sm="24"
        :xs="24">
        <ElCard
          shadow="hover"
          class="mb-20px">
          <Echart
            :options="barOptions"
            :height="300" />
        </ElCard>
      </ElCol>
      <ElCol :span="24">
        <ElCard
          shadow="hover"
          class="mb-20px">
          <Echart
            :options="lineOptions"
            :height="350" />
        </ElCard>
      </ElCol>
      <ElCol :span="24">
        <ElCard
          shadow="hover"
          class="mb-20px">
          <Echart
            :options="wordOptions as any"
            :height="300" />
        </ElCard>
      </ElCol>
    </ElRow>
  </ContentWrap>
</template>
